import {Text, Group, ActionIcon, Tooltip, Pill} from "@mantine/core";
import {notifications} from "@mantine/notifications";
import {IconEdit, IconLock, IconLockOpen} from "@tabler/icons-react";
import {DataTableColumnGroup} from "mantine-datatable";
import {handleSingleRowEdit} from "./handleSingleRowEdit";
import {EdgeSimulationProps} from "../data-interface";

export const renderColumnGroup: DataTableColumnGroup<EdgeSimulationProps>[] = [
  {
    id: "edge",
    title: "", // 设置为空
    style: {borderBottomColor: "transparent"}, // 清除底部横线
    columns: [
      // {accessor: "edge.id", title: "局向ID", textAlign: "center"}, // 不必展示
      {
        accessor: "edge.name",
        title: (
          <Text inherit pos="absolute" mt={-28}>
            局向
          </Text>
        ),
      },
    ],
  },
  {
    id: "source",
    title: "源节点（无向图）",
    textAlign: "center",
    columns: [
      {accessor: "source.name", title: "名称", textAlign: "center"},
      {accessor: "source.province", title: "省份", textAlign: "center"},
      {accessor: "source.role", title: "角色", textAlign: "center"},
      {accessor: "source.label", title: "标签", textAlign: "center"},
    ],
  },
  {
    id: "target",
    title: "目的节点（无向图）",
    textAlign: "center",
    columns: [
      {accessor: "target.name", title: "名称", textAlign: "center"},
      {accessor: "target.province", title: "省份", textAlign: "center"},
      {accessor: "target.role", title: "角色", textAlign: "center"},
      {accessor: "target.label", title: "标签", textAlign: "center"},
    ],
  },
  {
    id: "alreadyKnown",
    title: "已知信息",
    textAlign: "center",
    columns: [
      {
        accessor: "bwNow",
        title: "现状带宽(Gbps)",
        textAlign: "center",
        // 删除渲染吧，太丑了
        // render: (record: EdgeSimulationProps) => <Pill>{record.bwNow}</Pill>,
      },
      {accessor: "traffDemand", title: "理论需求流量(Gbps)", textAlign: "center"},
    ],
  },
  {
    id: "toBeConfiged",
    title: "待配置信息",
    textAlign: "center",
    columns: [
      {
        accessor: "utilDemand",
        title: "需求利用率(%)",
        textAlign: "center",
        cellsStyle: ({utilDemand}) => (utilDemand === null ? {background: "#FF332222"} : undefined),
      },
      {
        accessor: "baseSize",
        title: "颗粒度",
        textAlign: "center",
        cellsStyle: ({baseSize}) => (baseSize === null ? {background: "#FF332222"} : undefined),
      },
    ],
  },
  {
    id: "calculatedResult",
    title: "理论计算结果",
    textAlign: "center",
    columns: [
      {
        accessor: "bwCalcul",
        title: "理论带宽(Gbps)",
        textAlign: "center",
      },
    ],
  },
  {
    id: "designedResult",
    title: "最终设计结果",
    textAlign: "center",
    columns: [
      {
        accessor: "bwDesign",
        title: "设计带宽(Gbps)",
        textAlign: "center",
      },
      {
        accessor: "utilDesign",
        title: "设计利用率(%)",
        textAlign: "center",
      },
    ],
  },
  {
    id: "actions",
    title: "", // 设置为空
    style: {borderBottomColor: "transparent"}, // 清除底部横线
    columns: [
      {
        accessor: "actions",
        // 使二级表头处于中间
        title: (
          <Text inherit pos="absolute" mt={-28} ml={10}>
            操作
          </Text>
        ),
        render: (record: EdgeSimulationProps) => (
          <Group gap={4} wrap="nowrap">
            <Tooltip label="修改配置" withArrow>
              <ActionIcon
                size="sm"
                variant="subtle"
                color="blue"
                onClick={() => {
                  handleSingleRowEdit(record);
                }}
              >
                <IconEdit size={16} />
              </ActionIcon>
            </Tooltip>

            <Tooltip label="切换锁定状态" withArrow>
              <ActionIcon
                size="sm"
                variant="subtle"
                color={record.isRecordSelectable ? "green" : "red"}
                onClick={() => {
                  // 1. 然后修改该行数据中的lock值，对当前值：record.locked 取反，并提交到后台
                  // 2. 此时表格应该有
                  // 3. 接着等待后台提示成功后，右下角通知显示修改成功
                  // 4. 最后触发表格刷新
                  notifications.show({
                    color: "green",
                    title: "修改表格状态",
                    message: "成功",
                  });
                }}
              >
                {record.isRecordSelectable ? <IconLockOpen size={16} /> : <IconLock size={16} />}
              </ActionIcon>
            </Tooltip>
          </Group>
        ),
      },
    ],
  },
];
